<template>
  <div class="content">
    <el-row :gutter="24">
      <el-col :span="8">
        <el-button type="primary" @click="handleAdd">新增体验者</el-button>
      </el-col>
    </el-row>

    <Art-table :data="tableData">
      <el-table-column prop="wechatid" label="体验者微信号" />
      <el-table-column prop="bindTime" label="添加时间" />
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
        </template>
      </el-table-column>
    </Art-table>

    <el-dialog title="新增体验者" v-model="showDialog" width="20%" :close-on-click-modal="false">
      <div v-if="showDialog">
        <el-form ref="ruleFormRef" :model="form" :rules="rules">
          <el-form-item label="微信号" prop="wechatid">
            <el-input v-model="form.wechatid" placeholder="请输入微信号" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="editLoading" @click="submitForm(ruleFormRef)">确认</el-button>
          <el-button @click="resetForm">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getTesterList, bindTester, unbindTester } from '@/api/ApiList'
import { reactive, ref } from 'vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'

const tableData = ref([])
const showDialog = ref(false)
const editLoading = ref(false)

interface RuleForm {
  wechatid: string
}

const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({
  wechatid: ''
})

const rules = reactive<FormRules<RuleForm>>({
  wechatid: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      handleSubmit()
    } else {
    }
  })
}

async function handleSubmit() {
  try {
    editLoading.value = true
    const res = await bindTester({
      wechatid: form.wechatid
    })
    if (res.code === '00000') {
      ElMessage.success('绑定成功')
      showDialog.value = false
      await getData()
    } else {
      ElMessage.error(res.msg)
    }
  } catch (e) {
  } finally {
    editLoading.value = false
  }
}

async function handleUnbind(id: any) {
  try {
    const res = await unbindTester({
      id
    })
    if (res.code === '00000') {
      ElMessage.success('解绑成功')
      showDialog.value = false
      await getData()
    } else {
      ElMessage.error(res.msg)
    }
  } catch (e) {
  } finally {
  }
}

function handleDelete(id: any) {
  ElMessageBox.confirm('确定删除该体验者吗？', '删除体验者', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleUnbind(id)
  })
}

async function getData() {
  const res = await getTesterList({})
  if (res.code === '00000' && res.data) {
    tableData.value = res.data
  }
}

function handleAdd() {
  showDialog.value = true
  form.wechatid = ''
}

function resetForm() {
  showDialog.value = false
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.content {
  margin-top: 20px;
  width: 100%;
}

.el-table {
  margin-top: 20px;
}
</style>
